<script setup lang="ts">
import { ref } from 'vue';

const color = ref('#E6315B');

const presets1 = [
    '#E6315B',
    '#793183',
    '#009DE7',
    '#00B59C',
    '#FFCE00',
    '#cee7d3',
    '#0505d6',
    '#c11ff3',
    '#90aede',
    '#FF4A21',
    '#F0F3F6',
    '#b4afe7',
    '#dae9ff'
];
const color2 = ref('rgba(121, 49, 131, 0.4)');
const color3 = ref('#00B59C');
const color4 = ref('#90aede');
const presets2 = ['#E6315B', '#793183', '#009DE7', '#00B59C'];
</script>

<template>
    <div>
        <h3>初始值分类为hex</h3>
        <f-color-picker :color="color" :presets="presets1"></f-color-picker>
    </div>
    <div style="margin-top: 20px">
        <h3>初始值分类为rgba</h3>
        <f-color-picker :color="color2" :presets="presets2"></f-color-picker>
    </div>
    <div style="margin-top: 20px">
        <h3>禁用状态</h3>
        <f-color-picker :color="color3" :presets="presets1" :disabled="true"></f-color-picker>
    </div>
    <div style="margin-top: 20px">
        <h3>无预置颜色值</h3>
        <f-color-picker></f-color-picker>
    </div>
</template>
